body {
	font-family: 'Microsoft YaHei', arial, 'STXihei';
	color: #333;
	background: #f7f7f7;
	@media (max-width: 640px) {
		background: #eee;
	}
}

ul,
ol {
	list-style: none;
	padding-left: 0;
}

.main-box {
	max-width: 978px;
	margin: auto;
	border: 1px solid #d7d9dd;
}

.cp-like-box {
	border: 1px solid #efefef;
	border-radius: 3px;
	background: #ffffff;
	padding-bottom: 4px;
	position: relative;
	&:after {
		content: '';
		display: block;
		width: 100%;
		height: 1px;
		border-top: 1px solid #efefef;
		border-bottom: 1px solid #efefef;
		position: absolute;
		left: 0;
		bottom: 1px;
	}
	@media (max-width:640px) {
		padding-bottom: 2px;
		&:after {
			border-top: 0;
		}
	}
}

.cp-dashed-box {
	border-top: 1px dashed #d7d9dd;
	margin: 0 13px;
	padding: 20px 0;
}

.lib-axis {
	height: 6px;
	background: #d9dbdf;
	position: relative;
	&-num {
		width: 0;
		height: 100%;
		background: #9ad052;
		-webkit-transition: width .5s;
		-moz-transition: width .5s;
		transition: width .5s;
		position: relative;
		&-width {
			position: absolute;
			bottom: -20px;
		}
	}
	&-sign,
	&-signNum {
		position: absolute;
		bottom: -20px;
		width: 36px;
		margin-left: -18px;
		text-align: center;
		font-size: 12px;
		color: #9ad052;
		font-weight: bold;
	}
	&-signNum {
		left: auto;
		right: -20px;
	}
}

h2 {
	text-align: center;
}

.cp-sub-click {
	display: inline-block;
	background: #ffae00;
	border-radius: 5px;
	font-weight: bold;
	color: #fff;
	font-size: 24px;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.cp-ordered-lists {
	padding: 15px 20px 15px 51px;
	margin: 0;
	line-height: 30px;
	counter-reset: li;
	font-size: 14px;
	li {
		text-align-last: auto;
		&:before {
			content: counter(li);
			counter-increment: li;
			display: inline-block;
			width: 20px;
			height: 20px;
			background: #e8e8e7;
			line-height: 20px;
			text-align: center;
			border-radius: 50%;
			margin: 0 6px 0 -26px;
		}
	}
}